<template>
  <div class="businessMask">
    <div
      :class="visible ? 'businessDialog' : 'businessDialog-hide'"
      :style="'width:' + dwidth + 'px;height:' + dheight + 'px;'"
    >
    <!-- 头部 -->
      <div class="dialog-header" v-movew>
        <!-- 月计划 -->
        <span>{{ winName }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="关闭"
          placement="top-start"
        >
          <span
            class="icon iconfont iconbiaoqianlan-guanbi"
            @click="hide"
          ></span>
        </el-tooltip>
      </div>
      <!-- 表主体 -->
      <div>
        <div
          style="
            margin-top: 16px;
            text-align: left;
            width: 100%;
            height: 56px;
            display: flex;
          "
        >
        <!-- 下面这块控制打印之类的按钮是否进行渲染 -->
          <div
            v-if="btnEnable"
            :class="[btnEnable ? 'btnCommon' : 'btnCommon disabled']"
            class=" onebtn"
            @click="wpsave"
          >
            <span class="iconfont iconbiaoge-baocun businessButtonAdd onespan">&nbsp;保存</span
            >
          </div>
          <!-- 发送按钮 -->
          <div
            :class="[btnEnable ? 'btnCommon' : 'btnCommon disabled']"
            class="leftbtn "
            @click="flowsend"
            v-if="(wfClassId || instNodeId) && wfState != 2"
          >
            <span
              class="iconfont iconliucheng-fasong businessButtonAdd leftspan"
            >&nbsp;发送</span
            >
          </div>
          <!-- 回退 -->
          <div
            :class="[
              btnEnable && !isStartNode ? 'btnCommon' : 'btnCommon disabled',
            ]"
            class="centerbtn "
            @click="flowback"
            v-if="(wfClassId || instNodeId) && wfState != 2"
          >
            <span
              class="iconfont iconliucheng-huitui businessButtonAdd centerspan"
            >&nbsp;回退</span
            >
          </div>

          <div
            :class="[btnEnable && isStartNode ? 'btnDel' : 'btnDel disabled']"
            class="rightbtn "
            @click="flowout"
            v-if="(wfClassId || instNodeId) && wfState != 2"
          >
            <span
              class="iconfont iconliucheng-zuofei1 businessButtonDelete rightspan"
            >&nbsp;作废</span
            >
          </div>
          <div
            :class="[btnEnable ? 'btnCommon' : 'btnCommon disabled']"
            class="leftbtn "
            @click="addRow"
            v-if="addrow"
          >
            <span
              class="iconfont iconhuitu-xinzenghang businessButtonAdd leftspan"
            >&nbsp;加行</span
            >
          </div>
          <div
            :class="[btnEnable ? 'btnCommon' : 'btnCommon disabled']"
            class="rightbtn "
            @click="delRow"
            v-if="addrow"
          >
            <span
              class="iconfont iconhuitu-shanchuhang businessButtonAdd rightspan"
            >&nbsp;删行</span
            >
          </div>
          <div class="btnCommon onebtn " @click="doprint">
            <span class="iconfont iconhuitu-dayin businessButtonAdd onespan"
              >&nbsp;打印</span
            >
          </div>
          <div class="btnCommon onebtn " @click="dialogVisible = true" v-if="instNodeId">
            <span class=" el-icon-thumb businessButtonAdd onespan"
              >&nbsp;加人</span
            >
          </div>
          <template v-for="(item, index) in btns">
            <div
              class="btnCommon onebtn "
              @click="btnclick($event, item)"
            >
              <span
                class="iconfont businessButtonAdd onespan"
                style="width: auto"
                ><span class="alias">{{ item.name }}</span></span
              >
            </div>
          </template>
          <!-- <div
            v-if="btnEnable"
            :class="[btnEnable ? 'btnCommon' : 'btnCommon disabled']"
            class="onebtn"
            @click="addReport"
          >
            <span class="el-icon-plus businessButtonAdd onespan">&nbsp;新增表单</span
            >
          </div> -->
        </div>
        <!-- 表单中表格内容 -->
        <div :style="'height:' + (dheight - 140) + 'px;overflow:auto;'">
          <!--根据tableset 渲染table 样式，绑定info.table下的内容-->
          <sysCellView
            :wfVar="wfVar"
            ref="cellV"
            :cellAdd="cellAdd"
            :acceptTime="acceptTime"
            :funcCode="funcCode"
            :getWorkRepdeptId="getWorkRepdeptId || this.tdeptId"
            :pdeptId="deptId"
            :pwpId="wpId"
            :pfuncId="funcId"
            :pnodeId="nodeId"
            :pworkId="workId"
            :pinstNodeId="instNodeId"
            :initParam="initParam"
            :pbusinessInfo="businessInfo"
            :pwpInstNodeId="jhId"
            :workId="workId"
            @sysBtnClick="sysBtnClick"
            @size="setsize"
            @setAddbtn="setAddbtn"
            @changeworkid="changeworkid"
          ></sysCellView>
        </div>
      </div>
      <!-- 留言信息 -->
      <flowSend
        v-if="showFlowSend"
        @close="closeFlowSend"
        @ok="FlowSendsave"
        :title="funcName"
        :content="info.notice"
        :wfClassId="wfClassId"
        :instNodeId="instNodeId"
        :sendtype="sendtype"
        :var="fvar"
        :deptId="deptId"
        :dataTable="dataTable"
        :jhId="jhId"
        :workId="workId"
        :workTable="workTable"
      ></flowSend>
      <partsOrder v-if="showParts" @close="showParts = false"></partsOrder>
    </div>
    <el-dialog
      title="添加人员"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      append-to-body>
      <el-input v-model="addManContent" placeholder="请输入添加人员信息，例如：123,456,789" type="textarea" :rows="5"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import { deepCopy } from "@/utils/public";
import { wfoutWf } from "@/system/api/flowSend";
import { wpselect, wpsave, wpdetail, updateWpVar, wfSaveUser } from "@/system/api/cellView";
import flowSend from "@/system/components/flowSend.vue";
import Vue from "vue";

import sysCellView from "@/system/components/sysCellView.vue";
export default {
  name: "cellView",
  components: {
    sysCellView,
    flowSend,
  },
  directives: {
    movew,
  },
  props: {
    cellAdd: {
      default: null
    },
    cellClassId: null, //表单classid   不用了的
    wpId: {
      default: null,
    }, //表单id
    funcId: {
      default: null,
    },
    tworkId: {
      default: null,
    }, //具体表单数据 主键
    tinstNodeId: {
      default: null,
    },
    tnodeCode: {
      default: null,
    },
    getWorkRepdeptId: {
      default: null,
    },
    tdeptId: {
      default: null,
    },
    funcName: {
      default: null,
    }, //模块名必须填写
    nodeId: {
      default: null,
    }, //0只读，1编辑
    initParam: {
      //初始化业务的变量
      default: null,
    },
    businessInfo: {
      default: null,
    },
    wpPlanId: {
      default: null,
    }, //计划模型id  业务模型新增要用
    wpNodeId: {
      default: null,
    }, //计划模型节点id 业务模型新增要用
    wpInstNodeId: {
      default: null,
    },
    funcCode: {
      //模块code
      default: null,
    },
    acceptTime: {
      //消息接收时间
      default: null,
    },
    wfVar: [],
    //计划实例节点id  业务模型编辑要用
    //			wpId 表单id   新增传 funcid，编辑传 wpId
    //			funcId 模块id  新增的时候 传funcId  ，编辑传wpid
    //			tinstNodeId 流程节点id  流程打开表单需要传tinstNodeId
    //			tnodeCode 节点code  '0'  单元格只读，'999999' 全部单元格可用   如果不传 会根据 流程节点配置  控制单元格的可用不可用
    //			tdeptId 部门id  新增的时候必须传入
    //			funcName 模块名  新增的时候必须传入
    //          nodeId 控制nodecode 是否可用，0只读，1编辑  ，编辑有流程按 表单单元格的可用流程节点分配状态
    // 			编辑的时候 要传   tworkId  wpId  nodeId   流程要   tinstNodeId
    //			initParam 初始化参数，初始化表单   initParam:{gcName:'线路工程1号',gcCode:'BD-XX-01',gcId:1}
  },
  data() {
    return {
      dialogVisible: false,
      addManContent:'',
      visible: true,
      dheight: 200, //sysCellView 会设置的
      dwidth: 600, //sysCellView 会设置的
      tableset: [], //sysCellView 会设置的
      info: {
        //sysCellView 会设置的  ，可以修改里面的内容
        wpId: null,
        notice: null,
        content: null,
        table: [
          {
            record: [{}],
          },
        ],
      },
      workId: null, //表单实列id	  打开表单用的
      showFlowSend: false,
      sendtype: 0, //发送流程用的
      fvar: null, //发送流程用的
      deptId: null, //发送流程用的
      instNodeId: null, //发送流程用的
      nodeCode: null, // sysCellView 会设置的
      wfClassId: null, // sysCellView 会设置的
      dataTable: null, // sysCellView 会设置的
      isStartNode: null, //是否首节点  sysCellView 会设置的
      btnEnable: true, //按钮是否能用
      jhId: null, //计划id，业务驱动用
      dataTable: null, //流程发送需要
      fwpid: null, //流程发起的时候要写入表单id
      winName: null,
      addrow: false,
      workTable: null,
      showScell: false,
      showprint: false, //接收打印的id
      btns: [],
      showParts: false, //测试  订单分配
      wfState: 0,
      saveData: {},
    };
  },
  computed: {},
  created() {
    			this.tableset = this.tablesetp;
    this.workId = this.tworkId;
    			console.log(this.workId);

    if (this.tinstNodeId) {
      //流程中要提供节点id
      this.instNodeId = this.tinstNodeId;
    }
    if (this.tnodeCode) {
      //根据节点code  来判断 可用不可用   如果不传  那么  就要初始化
      this.nodeCode = this.tnodeCode;
    }
    console.log("传入的wpInstNodeId：" + this.wpInstNodeId);
    if (this.getWorkRepdeptId || this.tdeptId) {
      //根据节点code  来判断 可用不可用   如果不传  那么  就要初始化
      console.log(this.getWorkRepdeptId || this.tdeptId);
      this.deptId = this.getWorkRepdeptId || this.tdeptId;
    }

    if (this.wpInstNodeId) {
      //业务模型有 wpInstNodeId 传入  ，模块新增是没有计划id 的， 首节点是模块新增
      this.jhId = this.wpInstNodeId;
    }

    this.btnEnable = this.nodeId == 1 ? true : false;
  },
  mounted() {
    // console.log("this.jhId",this.jhId)
    // this.$refs.cellV.wpdetail().then((res) => {
    //   //打开表单
    //   console.log('res',res);
    //   if (res) {
    //     if (res.wfClassId) {
    //       this.wfClassId = res.wfClassId;
    //     }

    //     if (res.isStartNode != null) {
    //       this.isStartNode = res.isStartNode;
    //     }
    //     if (res.jhId) {
    //       this.jhId = res.jhId;
    //       this.wpInstNodeId = res.jhId;
    //     }
    //     if (res.workId) {
    //       this.workId = res.workId;
    //     }

    //     if (res.dataTable) {
    //       this.dataTable = res.dataTable;
    //     }

    //     if (res.fwpid) {
    //       this.fwpid = res.fwpid;
    //     }
    //     if (this.deptId == null) {
    //       this.deptId = res.deptId;
    //     }

    //     if (res.funcName) {
    //       this.winName = res.funcName;
    //     }

    //     if (res.btns) {
    //       this.btns = res.btns;
    //     }
    //     if (res.wfState) {
    //       this.wfState = res.wfState;
    //     }
    //     if(res.workTable) {
    //       this.workTable = res.workTable
    //     }
    //   }
    // });
    this.wpdetail()
    this.saveData = JSON.parse(JSON.stringify(this.$refs.cellV.getData()));
  },
  methods: {
    async addMan(){
      let params = {}
      params.instNodeId = this.instNodeId
      params.users = this.addManContent.split(',')
      try{
        const data = await wfSaveUser(params)
        if(data.code == 200){
          this.$message.success('添加人员成功')
        }else{
          this.$message.error('添加人员失败')
        }
      }catch{
        this.$message.error('添加人员失败')
      }
      this.dialogVisible = false
      this.addManContent = ''
    },
    handleClose() {
      this.dialogVisible = false
      this.addManContent = ''
    },
    changeworkid(id) {
      this.workId=id
    },
    hide() {
      //				console.log(this.info)
      this.visible = false;
      this.$emit('cellAddEnd')
      // let data = this.$refs.cellV.getData();
      // let tableset = this.$refs.cellV.getTableSet();
      // console.log(data,tableset);
      setTimeout(() => {
        this.$emit("close", this.saveData);
      }, 400);
    },
    write() {
      console.log(this.info);
    },
    // 进入界面不会触发，等双击或者编辑时进入表单页面才会触发
    wpdetail () {
      this.$refs.cellV.wpdetail().then((res) => {
      console.log('btns',res);
      //打开表单
      if (res) {
        if (res.wfClassId) {
          this.wfClassId = res.wfClassId;
        }
        if (res.isStartNode != null) {
          this.isStartNode = res.isStartNode;
        }
        if (res.jhId) {
          this.jhId = res.jhId;
          this.wpInstNodeId = res.jhId;
        }
        if (res.workId) {
          this.workId = res.workId;
        } 

        if (res.dataTable) {
          this.dataTable = res.dataTable;
        }

        if (res.fwpid) {
          this.fwpid = res.fwpid;
        }
        if (this.deptId == null) {
          this.deptId = res.deptId;
        }

        if (res.funcName) {
          this.winName = res.funcName;
        }

        if (res.btns) {
          this.btns = res.btns;
        }
        if (res.wfState) {
          this.wfState = res.wfState;
        }
        if(res.workTable) {
          this.workTable = res.workTable
        }
      }
    });
    },
    // ?保存按钮?
    wpsave() {
      console.log('保存？');
      //wpId deptId tables param nodeCode
      if (this.btnEnable) {
        this.$refs.cellV.save(true).then((res) => {
          console.log(res);
          if (res.success) {
            //保存后 设置  workid  计划id
            this.info.table = res.info.table
            console.log(this.info.table);
            this.workId = res.info.workId;
            if (this.jhId == null || this.jhId == "") {
              //保存获取计划id
              this.jhId = res.info.wpInstNodeId;
              this.wpInstNodeId = res.info.wpInstNodeId;
            }
            if (this.jhId) {
              // 业务模型参数更新
              let fvar = this.$refs.cellV.getFvar(2);
              let obj = {};
              obj.var = fvar;
              obj.wpInstId = this.jhId;
              if (fvar) {
                console.log(".........");
                updateWpVar(obj);
                // console.log("updateWpVar1", obj)
              }
            }
            if (this.deptId == null) {
              //
              this.deptId = this.getWorkRepdeptId || this.tdeptId;
            }
            // console.log('保存后的deptId');
            // console.log(this.deptId);
            this.message(res.msg, 1);
            this.saveData = JSON.parse(
              JSON.stringify(this.$refs.cellV.getData())
            );
            console.log(this.saveData);
          } else {
            this.message(res.msg, 3);
          }
          // this.wpdetail()
        });
      }
      // let data = this.$refs.cellV.getData();
    },
    //			wpdetail(){//funcId wpId workId param nodeCode   根据wpid 获取详情
    //
    //				if(this.workId ){
    //					let params = {wpId:65,workId:this.workId,param:null,nodeCode:'999999'};
    //					wpdetail(params).then((res)=>{
    //						this.info.table = res.table;
    //					})
    //				}
    //			},
    wpselect() {
      // wpId fieldName param
    },
    // ?加行按钮?
    addRow() {
      console.log('加行');
      if (this.btnEnable) {
        this.$refs.cellV.addRow();
      }
      //				this.$refs.cellV.addRowBytable(1,1);
    },
    // ？删行？
    delRow() {
      if (this.btnEnable) {
        this.$refs.cellV.delRow();
      }
    },
    FlowSendsave(e) {
      //流程发送界面   点击发送后 关闭流程发送界面
      this.showFlowSend = false;
      this.visible = false;
      setTimeout(() => {
        this.$emit("close", true);
      }, 400);
    },
    closeFlowSend() {
      //关闭流程发送界面
      this.showFlowSend = false;
    },
    flowsend() {
      //发送流程
      //				console.log(this.wfClassId);
      if ((this.wfClassId || this.instNodeId) && this.btnEnable) {
        this.$refs.cellV.save(true).then((res) => {
          if (res.success) {
            let fvar = this.$refs.cellV.getFvar(2);
            let obj = {};
            obj.var = fvar;
            obj.wpInstId = res.info.wpInstNodeId;
            if (res.info.wpInstNodeId && fvar) {
              // 业务模型参数更新
              updateWpVar(obj);
            }

            this.info.notice = res.info.notice;
            if (this.workId == null || this.workId == "") {
              this.workId = res.info.workId;
            }

            if (this.jhId == null || this.jhId == "") {
              //保存获取计划id
              this.jhId = res.info.wpInstNodeId;
              this.wpInstNodeId = res.info.wpInstNodeId;
            }

            if (this.jhId) {
              // 业务模型参数更新
              let fvar = this.$refs.cellV.getFvar(2);
              let obj = {};
              obj.var = fvar;
              obj.wpInstId = this.jhId;
              if (fvar) {
                updateWpVar(obj);
                console.log("updateWpVar", obj);
              }
            }

            this.deptId = this.getWorkRepdeptId || this.tdeptId;

            this.$refs.cellV.beforeSend().then((res) => {
              if (res) {
                this.fvar = this.$refs.cellV.getFvar();
                this.fvar.push({
                  name: "view",
                  value: "cellView.vue",
                });
                this.fvar.push({
                  name: "wpId",
                  value: this.fwpid,
                });
                this.fvar.push({
                  name: "dataId",
                  value: this.workId,
                });
                if (this.instNodeId == null && this.wfClassId != null) {
                  this.sendtype = 0;
                } else {
                  this.sendtype = 1;
                }
                console.log(this.fvar);
                this.showFlowSend = true;
              }
            });
          } else {
            this.message(res.msg, 3);
          }
        });
      }
    },
    flowback() {
      //流程回退  	instNodeId 流程节点实例id  	isStartNode 是否开始节点

      if (this.instNodeId && this.btnEnable && this.isStartNode == 0) {
        this.showFlowSend = true;
        this.sendtype = -1;
      }
    },
    flowout() {
      //流程作废
      if (this.instNodeId && this.btnEnable && this.isStartNode == 1) {
        this.messageInput("请输入作废信息", "流程作废").then((mres) => {
          if (mres.type == "confirm") {
            let backWord = mres.value;
            let param = {
              //								wfInstId:null,
              fromNode: {
                instNodeId: this.instNodeId,
              },
              fromUser: {
                deptId: this.deptId,
              },
              word: backWord,
            };
            wfoutWf(param).then((res) => {
              if (res.success) {
                this.message(res.msg, 1);
                this.visible = false; //关闭当前界面，关闭流程界面
                setTimeout(() => {
                  this.$emit("close", true);
                }, 400);
              } else {
                this.message(res.msg, 3);
              }
            });
          }
        });
      } else {
        this.message("回退到首节点才能作废！", 3);
      }
    },
    setAddbtn(e) {
      this.addrow = this.addrow || e;
      console.log('e',e);
    },
    setsize(size) {
      this.dheight = size.height;
      this.dwidth = size.width;
    },
    doprint() {
      this.$refs.cellV.doprint();
    },
    btnclick(e, item) {
      this.$refs.cellV.runclick(item);
      console.log('这是item',JSON.stringify(item));
    },
    test() {
      this.showParts = true;
    },
    addReport(){
      this.$emit('addReportIn')
      this.$refs.cellV.setNewInfo()
    },
    sysBtnClick(btn) {
      if(btn == 'flowsend'){// 发送
        this.flowsend()
      }else if(btn == 'wpsave'){// 保存
        this.wpsave()
      }else if(btn == 'flowback'){// 回退
        this.flowback()
      }else if(btn == 'flowout'){// 作废
        this.flowout()
      }else if(btn == 'addRow'){// 加行
        this.addRow()
      }else if(btn == 'delRow'){// 删行
        this.delRow()
      }else if(btn == 'doprint'){// 打印
        this.doprint()
      }else if(btn == 'dialogVisible'){ // 加人
        this.dialogVisible = true
      }else if(btn == 'addReport'){// 表内新增
        this.addReport()
      }
    }
  },
};
</script>

<style scoped>
/*表单背景宽高设置*/
.open-content {
  width: 100%;
  box-shadow: 0px -4px 0px 0px #0080ff;
  background: var(--system-page-content-wrapper-bgc);
  border-radius: 4px 4px 0px 0px;
  transform: scale(1);
  animation: myscale 0.4s;
  opacity: 1;
}

/*表单打开动画*/
@keyframes myscale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*表单关闭样式及动画*/
.open-content-hide {
  width: 100%;
  box-shadow: 0px -4px 0px 0px #0080ff;
  background: var(--system-page-content-wrapper-bgc);
  border-radius: 4px 4px 0px 0px;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}

@keyframes myscalehide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
.dialog-header {
  height: 48px;
  line-height: 48px;
  width: calc(100% - 8px);
  padding: 0 17px;
  background: var(--business-dialog-header-bgc);
  border-radius: 4px 4px 0px 0px;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: var(--business-dialog-header-text-color);
}
.dialog-header span {
  float: left;
}
.dialog-header .icon {
  cursor: pointer;
  float: right;
}
.leftbtn {
  margin-left: 16px;
  text-align: center;
}
.leftspan {
  border-radius: 4px 0 0 4px;
}
.businessButtonAdd {
  min-width: 75px;
  text-align: center;
}
.rightbtn {
  margin-left: 1px;
  text-align: center;
}
.rightspan {
  border-radius: 0 4px 4px 0;
}
.centerbtn {
  margin-left: 1px;
  text-align: center;
}
.centerspan {
  border-radius: 0 0 0 0;
}

.onebtn {
  margin-left: 16px;
  text-align: center;
}
.onespan {
  border-radius: 4px;
}

.iconfont {
  font-size: 12px;
}
</style>
